Ext.onReady(function() {

	// NOTE: This is an example showing simple state management. During
	// development,
	// it is generally best to disable state management as dynamically-generated
	// ids
	// can change across page loads, leading to unpredictable results. The
	// developer
	// should ensure that stable state ids are set for stateful components in
	// real apps.

	Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

	// 构造border的north,用作logo
	var north = new Ext.BoxComponent({ // raw
		region : 'north',
		el : 'north',
		height : 32
	});

	// 构造border的soutth,准备用作版权
	var south = {
		region : 'south',
		contentEl : 'south',
		split : true,
		height : 50,
		minSize : 50,
		maxSize : 50,
		collapsible : true,
		title : 'South',
		margins : '0 0 0 0'
	};

	// 构造border的east
	var east = {
		region : 'east',
		title : 'East Side',
		collapsible : true,
		split : true,
		width : 225,
		minSize : 175,
		maxSize : 400,
		layout : 'fit',
		margins : '0 5 0 0',
		items : new Ext.TabPanel({
					border : false,
					activeTab : 1,
					tabPosition : 'bottom',
					items : [{
								html : '<p>A TabPanel component can be a region.</p>',
								title : 'A Tab',
								autoScroll : true
							}, new Ext.grid.PropertyGrid({
										title : 'Property Grid',
										closable : true,
										source : {
											"(name)" : "Properties Grid",
											"grouping" : false,
											"autoFitColumns" : true,
											"productionQuality" : false,
											"created" : new Date(Date
													.parse('10/15/2006')),
											"tested" : false,
											"version" : 1,
											"borderWidth" : 1
										}
									})]
				})
	};

	// 构造border的west
	var root = new Ext.tree.AsyncTreeNode({
				// 声明一个根节点
				id : '0',// id为0
				text : '模块列表',// 显示文字为0
				children : [{// 子节点
					text : 'loading',// 显示文字为loading
					iconCls : 'loading',// 使用图标为loading 在index.html style 中定义
					leaf : true
						// 是叶子节点,不在包含子节点
				}]
			});
	var treeLoader = new Ext.tree.TreeLoader();// 指定一个空的TreeLoader
	var tree = new Ext.tree.TreePanel({// 声明一个TreePanel显示tree
		id : 'tree',// id为tree
		iconCls : 'nav',
		region : 'north',// 设定显示区域为东边,停靠在容器左边
		split : true,// 出现拖动条
		collapseMode : 'mini',// 拖动条显示类型为mini,可出现拖动条中间的尖头
		width : 210,// 初始宽度
		minSize : 210,// 拖动最小宽度
		maxSize : 300,// 拖动最大宽度
		collapsible : true,// 允许隐藏
		title : "模块列表",// 显示标题为树
		loader : treeLoader,// 指定数据载入的loader对象,现在定义为空
		lines : true,// 出现节点间虚线
		autoScroll : true,// 自动出现滚动条
		root : root
			// 根节点为 root 对象
	});

	root.on('expand', gettree);// 当根节点展开后触发gettree事件

	function gettree(node) {// 此方法使用mootools框架的AJAX实现对子节点的异步读取,没使用EXT的是为了表达
		// EXT的灵活性和可扩展性
		if (node.firstChild.text == 'loading') {// 如果当前展开节点的第一个子节点为loading,则调用异步方法取得子节点数据,否则直接展开
			var url = 'json\/getTree.action';// 请求的地址,因为使用的 struts2
			// 所以请求为.action
			var params = 'id=' + node.id;// 请求数据
			// 创建Ajax对象(mootools提供)，对应于发送请求
			var myAjax = new Ajax(url, {
						method : 'post',
						data : params,
						onComplete : function() {
							// url:请求位置 method:请求方式 可以使用get或post data:请求数据
							// onComplete:当异步调用完成时调用的方法,即响应内容完全获得后调用该方法
							// alert(this.response.text);
							// '{"id":"0","tl":[{"id":"1","leaf":true,"name":"用户管理"},{"id":"2","leaf":true,"name":"用户管理"},{"id":"3","leaf":true,"name":"用户管理"},{"id":"4","leaf":true,"name":"用户管理"}]}'
							var myObject = Json.evaluate(this.response.text);
							// 将返回的响应数据转换为JS对象,返回数据为JSON格式,Json对象(mootools提供)
							// alert(this.response.text);
							var tl = myObject.tl;// 获取tl数组,该数组中数据为子节点数据,由ACTION处理后获得
							// alert(tl);

							for (var i = 0; i < tl.length; i++) {// 循环数组,添加子节点
								var cnode = new Ext.tree.AsyncTreeNode({// 声明子节点对象
									// tl[i].id
									// 此处tl为action返回的数据,也就是在action中定义的List
									// tl=new ArrayList();
									// tl中元素都为 treeNode对象,所以可是使用treeNode中属性访问
									// tl[i].id 则访问tl数组中,第i个元素的id属性值
									// tl[i].name 则访问tl数组中,第i个元素的name属性值
									// tl[i].leaf 则访问tl数组中,第i个元素的leaf属性值
									id : tl[i].id,// + node.id id
									// 为服务器返回id+父节点id
									text : tl[i].name, // + node.id
									// 显示内容为服务器返回id+父节点id
									leaf : tl[i].leaf,// 是否为叶子节点,根据服务器返回内容决定是否为叶子节点
									children : [{// 添加子节点,如果服务器返回tl[i].leaf为ture则孩子节点将无法显示
										text : 'loading',
										iconCls : 'x-tbar-loading',
										leaf : true
									}]
								});
								cnode.on('expand', gettree);// 定义当前节点展开时调用gettree方法,再次异步读取子节点
								node.appendChild(cnode);// 将当前节点添加为待展开节点子节点
							}
							node.firstChild.remove();// 删除当前节点第一个孩子节点(loading节点)
						}
					});
			myAjax.request();// 发送ajax异步请求
		}
	}

	var west = {
		region : 'west',
		id : 'west-panel',
		title : 'West',
		split : true,
		width : 200,
		minSize : 175,
		maxSize : 400,
		collapsible : true,
		margins : '0 0 0 5',
		layout : 'accordion',
		layoutConfig : {
			animate : true
		},
		items : [tree, {
					contentEl : 'west',
					title : 'Navigation',
					border : false,
					iconCls : 'nav'
				}, {
					title : 'Settings',
					html : '<p>Some settings in here.</p>',
					border : false,
					iconCls : 'settings'
				}]
	};

	// 构造border的center
	var center = new Ext.TabPanel({
				region : 'center',
				enableTabScroll : true,
				deferredRender : false,
				autoScroll : true,
				activeTab : 0,
				items : [{
							autoLoad : 'main.jsp',
							title : 'Close Me',
							closable : true,
							autoScroll : true
						}]
			});

	// 构造border视图
	var viewport = new Ext.Viewport({
				layout : 'border',
				items : [north, south,  west, center]
			});

	// 点击模块列表项打开新tab页
	tree.on('click', function(node) {// 当树节点被点击时触发
				if (node.isLeaf()) {// 如果不是叶子节点则不处理
					// 请求的地址
					selectNode = node;// 设置选择节点为当前节点
					var url = 'json\/getWindow.action';// 请求位置
					var params = 'id=' + node.id;// 请求数据
					// 创建Ajax.Request对象，对应于发送请求
					var myAjax = new Ajax(url, {
								method : 'post',
								data : params,
								onComplete : function() {// 异步响应完成时的回调方法
									var myObject = Json
											.evaluate(this.response.text);
									var priid = myObject.priid;
									var pris = myObject.pris;
									var priname = pris.priname;
									var priurl = pris.priurl;

									// var tab = center.getComponent(priid);
									var tab = center.getItem(priname);
									
									if (tab) {
										center.setActiveTab(tab);										
									} else
										center.add({
													id : priname,
													iconCls : 'x-tbar-loading',
													autoLoad : {
														url : priurl,
														nocache : true,
														scripts : true
													},
													title : priname,
													closable : true,
													autoScroll : true,
													autoHeight:true,
													autoWidth:true
													
												}).show();

								},
								onFailure : function() {
									Ext.MessageBox.Alert('', '请求服务器失败！');
								}
							});
					myAjax.request();// 发送请求

				}
			});
			

	
});